<template>
    <section class="real-app">
        <input
        type="text"
        class="add-input"
        autofocus="autofocus"
        placeholder="接下来去做什么"
        @keyup.enter="addTodo"
        />
        <item
                :todo="todo"
                v-for="todo in filteredToodos"
                :ket="todo.id"
                @del="deleteTodo"
        />

        <Tabs
                :filter="filter"
                :todos="todos"
                @toggle="toggleFilter"
                @cleraAllCompleted="cleraAllCompleted"/>

    </section>
</template>
<script>
    import Item from './item.vue'
    import Tabs from './tabs.vue'
    let id = 0
export default {
      data () {
        return {
          todos: [],
          filter: 'all'
        }
      },
      components: {
        Item,
        Tabs
      },
      computed: {
        filteredToodos () {
          if (this.filter === 'all') {
            return this.todos
          }
          const completed = this.filter === 'completed'

          return this.todos.filter(todo => completed === todo.completed)
        }
      },
      methods: {
        addTodo (e) {
          // unshift  数组的开头添加一个一个或者多个元素
          this.todos.unshift({
            id: id++,
            content: e.target.value.trim(), // 获取当前的焦点元素的内容
            completed: false
          })
          e.target.value = ''
        },
        deleteTodo (id) {
          console.log(this.todos.findIndex(todo => todo.id === id))
          this.todos.splice(this.todos.findIndex(todo => todo.id === id), 1)
        },
        toggleFilter (state) {
          this.filter = state
        },
        cleraAllCompleted () {
          this.todos = this.todos.filter(todo => !todo.completed)
        }
      }
    }
</script>
<style lang="stylus" scoped>
    .real-app {
        width 600px
        margin 0 auto
        box-shadow 0 0 5px #666
    }

    .add-input {
        position: relative;
        margin: 0;
        width: 100%;
        font-size: 24px;
        font-family: inherit;
        font-weight: inherit;
        line-height: 1.4em;
        border: 0;
        outline: none;
        color: inherit;
        box-sizing: border-box;
        font-smoothing: antialiased;
        padding: 16px 16px 16px 36px;
        border: none;
        box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
    }
</style>